<template>
  <div>
    <!--网站辅助导航-->
    <a-row type="flex" justify="start" align="top" class="animated slideInDown">
      <a-col :xs="0" :lg="24" id="helperHeader">
        <BlogHelperHeader></BlogHelperHeader>
      </a-col>
    </a-row>
    <!--网站主导航-->
    <a-affix :offsetTop="0">
      <a-row class="mainHeaderBootm animated slideInDown" id="mainHeader"
             :style="{background: 'white',display: mainHeaderShowStatus}">
        <a-col :xs="0" :lg="4" :offset="2">
          <a @click="toBlogIndexPage">
            <!-- <LogoSvg></LogoSvg>-->
            <BlogLogo></BlogLogo>
          </a>
        </a-col>
        <a-col :lg="14">
          <BlogMainHeader></BlogMainHeader>
        </a-col>
        <!--<a-col :span="5" class="searchContainer">
          <BlogSearch></BlogSearch>
        </a-col>-->
      </a-row>
    </a-affix>
    <BlogCarousel v-if="device==='desktop'" v-show="carouselShowStatus"></BlogCarousel>
    <!--margin样式去除guteer导致的左右滚动条问题-->
    <div id="blogCarousel" style="padding-top: 40px;margin-top: -40px"></div>
    <a-row type="flex" justify="center" :gutter="16" style="margin: 20px 0 0 0;">
      <!--主体部分(content)-->
      <!--class="module-panel" -->
      <a-col :xs="24" :lg="14"  >
        <router-view></router-view>
      </a-col>
      <!--左侧导航（sidebar）-->
      <a-col :xs="0" :lg="6" >
        <!--个人信息-->
        <BlogProfile></BlogProfile>
        <!--所有标签列表-->
        <BlogTagItemList></BlogTagItemList>
        <!--网站使用情况-->
        <BlogTagTop5></BlogTagTop5>
      </a-col>

    </a-row>

    <!--网站底部-->
    <a-row>
      <a-col :span="24">
        <BlogFooter></BlogFooter>
      </a-col>
    </a-row>
    <!--回到顶部-->
    <a-back-top/>
    <!--登录弹框-->
    <a-modal
      :visible="loginVisible"
      @ok="loginOk"
      :confirmLoading="false"
      :footer="null"
      @cancel="loginCancel"
    >
      <Login :loginMode="`blog`"></Login>
    </a-modal>

  </div>
</template>

<style>

</style>


<script>
  import BlogCarousel from '@/components/Blog/BlogCarousel'
  import BlogMainHeader from '@/components/Blog/BlogMainHeader'
  import BlogHelperHeader from '@/components/Blog/BlogHelperHeader'
  import ACol from 'ant-design-vue/es/grid/Col'
  import BlogSearch from '@/components/Blog/BlogSearch'
  import BlogFooter from '@/components/Blog/BlogFooter'
  import LogoSvg from '@/assets/blog-logo.svg?inline'

  import BlogProfile from '../components/Blog/BlogProfile'
  import BlogTagTop5 from '../components/Blog/BlogTagTop5'
  import BlogTagItemList from '../components/Blog/BlogTagItemList'
  import { mapGetters, mapActions } from 'vuex'
  import Login from '@/views/user/Login'
  import BlogLogo from '@/components/tools/BlogLogo'

  export default {
    name: 'BlogLayout',
    components: {
      BlogCarousel,
      BlogProfile,
      BlogTagTop5,
      BlogTagItemList,
      ACol,
      BlogMainHeader,
      BlogHelperHeader,
      BlogSearch,
      BlogFooter,
      LogoSvg,
      Login,
      BlogLogo
    },
    data() {
      return {
        scroll: {
          scrollTop: 0,
          helperHeaderHeight: 0,
          mianHeaderHeight: 0,
          direction: 'down'
        }
      }
    },
    computed: {
      ...mapGetters(['carouselShowStatus', 'loginVisible','device']),
      mainHeaderShowStatus() {
        //此处的180为试探值，通过调整该参数达到最佳效果
        if (this.scroll.scrollTop < this.scroll.helperHeaderHeight + this.scroll.mianHeaderHeight + 180) {
          //显示：滚动距离小于30+55时
          return 'block'
        } else if (this.scroll.direction === 'up') {
          //隐藏：大于30+55且方向向上
          return 'block'
        } else if (this.scroll.direction === 'down') {
          //固定：大于30+55且方向向下
          return 'block'
        } else {
          return 'error'
        }
      }
    },
    mounted() {
      this.scroll.helperHeaderHeight = document.getElementById('helperHeader').clientHeight
      this.scroll.mianHeaderHeight = document.getElementById('mainHeader').clientHeight
      this.scroll.mianHeaderOffset = this.scroll.helperHeaderHeight
      window.addEventListener('scroll', this.getScroll)
    },
    created() {
      this.$store.dispatch('setBlogTags', {})
    },
    methods: {
      // mobile,tablet,desktop
      ...mapActions(['setBlogTags']),
      loginCancel() {
        this.$store.dispatch('setLoginVisible', false)
      },
      loginOk(e) {
        setTimeout(() => {
          this.$store.dispatch('setLoginVisible', false)
        }, 2000)
      },
      //博客首页
      toBlogIndexPage() {
        this.$router.push('/blog/index?v=' + new Date().getMilliseconds())
      },
      //监听滚动
      getScroll() {
        /*
        * 临界值：
        *       30：主菜单变成fixed布局
        *       30+55：向下滚动时隐藏主菜单，向上回滚时显示主菜单。
        * */
        if (document.documentElement.scrollTop > this.scroll.scrollTop) {
          this.scroll.direction = 'down'
        } else {
          this.scroll.direction = 'up'
        }
        this.scroll.scrollTop = document.documentElement.scrollTop
      }
    }

  }
</script>


<style scoped>
  .mainHeaderBootm {
    height: 60px;
    border-bottom: 2px solid #e8e8e8;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); /*阴影*/
  }

  .blog-router-active {
    color: black;
  }

  .ant-back-top {
    right: 46px;
  }

  .tag-container-cover {
    width: 200px;
    height: 60px;
  }

  /*输入框圆角*/
  .searchContainer >>> .ant-select-auto-complete.ant-select-lg .ant-input {
    border-radius: 20px;
  }
</style>
